/**
 * Created by Administrator on 2017/7/24.
 */


import React,{Component} from 'react'
import {Modal, Text,TextInput,StyleSheet,View,Image,TouchableOpacity,Button} from 'react-native'



let closeImg = require('../Img/btn_close.png')
let inputPhoneImg = require('../Img/icon_shouji.png')
let inputPwImg = require('../Img/icon_mima.png')
export default class LoginPopup extends Component{

    //构造函数
    constructor(props) {
        super(props);
        this.state = {phone: '',pw:''};
    }

    render(){
        return(
            <Modal
                animationType={'fade'}
                transparent={true}
                visible={this.props.isShow}>
                <View style={styles.contentLl}>
                    <View style={styles.contentL2}>
                        <TouchableOpacity style={{width:'100%',flexDirection:'row',justifyContent:'flex-end',marginTop:19,marginRight:19}}
                                          onPress={()=>{this.props.dismiss()}}>
                            <Image style={{width:20,height:20}} source={closeImg}/>
                        </TouchableOpacity>
                        <Text style={styles.title}>登录</Text>
                        <View style={styles.inputLlSty}>
                            <Image style={styles.inputImg} source={inputPhoneImg}/>
                            <TextInput style={styles.inputTv} placeholder='请输入手机号码' underlineColorAndroid='transparent'
                                       onChangeText={(text) => this.setState({phone:text})} keyboardType='numeric' />
                        </View>
                        <View style={styles.inputDevider}></View>
                        <View style={styles.inputLlSty}>
                            <Image style={styles.inputImg} source={inputPwImg}/>
                            <TextInput style={styles.inputTv} placeholder='请输入密码' underlineColorAndroid='transparent'
                                       onChangeText={(text) => this.setState({pw:text})} secureTextEntry={true}/>
                        </View>
                        <View style={styles.inputDevider}></View>
                        <Text style={{color:'#999',fontSize:12,marginTop:26}}>忘记密码？</Text>

                        <TouchableOpacity style={{marginTop:22,width:183,height:45,backgroundColor:'#40CCCB',alignItems:'center',justifyContent:'center',borderRadius:20}}
                                          onPress={()=>alert("您输入的内容为："+this.state.phone)}>
                            <Text style={{fontSize:18,color:'#fff'}}>登录</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    inputLlSty:{
        width:263,height:58,flexDirection:'row',alignItems:'center',marginTop:16
    },
    inputImg:{
        width:21,height:26,resizeMode:'contain'
    },
    inputTv:{
        width:210,color:'#333',fontSize:16,backgroundColor:'#fff',marginLeft:16
    },
    inputDevider:{
        width:263,marginRight:26,marginLeft:26,height:0.5,backgroundColor:'#bababa'
    },
    contentLl:{
        width:'100%',height:'100%',justifyContent:'center',
        alignItems:'center',backgroundColor:'rgba(0, 0, 0, 0.3)'
    },
    contentL2:{
        width:315,height:385,backgroundColor:'#fff',borderRadius:10,alignItems:'center'
    },
    title:{
        color:'#222',
        fontSize:22
    }
})